import React,{useEffect} from 'react'
import { Form, Input, Button,} from 'antd';
import { message,Row,Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {Link,useNavigate,useLocation} from 'react-router-dom'
import './lgName.scss'
import { reg } from '../../utils/validate';
import { ajax } from '../../api';

export default function LoginName() {
  return (
    <div className='loginName'>
        <Demo></Demo>
    </div>
  )
}
const Demo = () => {
  const navigate =  useNavigate()
 

  const [form] = Form.useForm()

    const onFinish =async (values: any) => {
      if(values.password==values.dbpassword){
        let res=await ajax.login(values)
        console.log(res);
        if(res.code==200){
          setTimeout(()=>{
            localStorage.setItem("username",values.username)
            sessionStorage.setItem("token",res.token )
            navigate('/home/mine')
          },1000)
        }
      }else{
        message.error('两次输入密码不同');
      }
        
        console.log(values);
        
    };
  
    const onFinishFailed = (errorInfo: any) => {
        message.error('请输入正确的表单信息');
    };

    const location=useLocation()
    console.log(location);
    useEffect(()=>{
    console.log(form);
     let username= new URLSearchParams(location.search).get('username')
     console.log(username);
     if(username){
       form.setFieldsValue({
         username
       })
     }
     
      
    },[])
  
    return (
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        form={form}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input 
           prefix={<UserOutlined className="site-form-item-icon" />}
           placeholder="请输入用户名"
          />
        </Form.Item>
  
        <Form.Item
          label="密码"
          name="password"
          rules={[
            { required: true, message: '密码不能为空' },
            { pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }
        
        ]}
        >
          <Input.Password 
           prefix={<LockOutlined className="site-form-item-icon" />}
           placeholder="请输入密码"
          />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="dbpassword"
          rules={[{ required: true, message: '密码不能为空' },{ pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }]}
        >
          <Input.Password 
           prefix={<LockOutlined className="site-form-item-icon" />}
           placeholder="请输入确认密码"
          />
        </Form.Item>

        <Form.Item
         labelCol={{ span: 0 }}
         wrapperCol={{ offset:8,span: 16 }}
         style={{color:'#fff',display:"flex",justifyContent:'space-between'}}
        >
          <Link to="/register">没有账号，前往注册</Link >
          <Link to="/forgetPass">忘记密码</Link >
        </Form.Item>
  
  
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Row>
            <Col span={11}>
            <Button type="primary" htmlType="submit" block style={{width:"100%"}}>
                登录
            </Button>
            </Col>
            <Col span={11} offset={2}>
            <Button type="primary" htmlType="reset" block danger style={{width:"100%"}}>
                重置
            </Button>
            </Col>
        </Row>
          
        </Form.Item>
      </Form>
    );
  };